<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link rel="stylesheet" type="text/css" href="<c:url value='../assets/css/bootstrap.css' />" >
        <link rel="stylesheet" type="text/css" href="<c:url value='../assets/css/jquery-ui.css' />" >
        <link rel="stylesheet" type="text/css" href="<c:url value='../assets/css/styles.css' />" >
        <script src="../assets/js/lib/jquery-1.8.2.min.js"></script>
        <script src="../assets/js/lib/jquery-ui-1.9.1.custom.min.js"></script>
        <script src="../assets/js/lib/bootstrap.min.js"></script>
        <script src="../assets/js/listbuckets.js"></script>
        <title>List S3 Buckets</title>
        <link rel="icon" type="image/ico" href="../assets/img/favicon.ico"/>
    </head>
    <body>
       <%@ include file="../../menu.html" %>
        <div class="row-fluid">            
            <div class="span4 body-content-buckets">
                <ul class="nav nav-list">
                    <div class="row-fluid">
                        <li class="nav-header">Bucket List
                        <a id="add-bucket-btn" class="cursor-style pull-right">
                            <i class="icon-plus"></i>
                        </a>
                        </li>
                    </div>                    
                    <li class="divider"></li>
                        <c:forEach var="bucket" items="${s3List}">
                        <li>
                            <div class="bucket">
                                <i class="icon-remove cursor-style btn_remove_bucket" data-id="${bucket.name}"></i>
                                <a id="${bucket.name}" href="/s3/getBucket.do?bucket=${bucket.name}" style="word-break: break-all;">${bucket.name}</a>
                            </div>
                        </li>
                    </c:forEach>
                </ul>
            </div>
            <div class="span6" style="margin-top: 60px;">
                <c:if test="${bucketContent.bucketName != null}">
                    <div class="row-fluid">
                        <ul class="breadcrumb">
                            <li><a href="/s3/getBucket.do?bucket=${bucketContent.bucketName}">${bucketContent.bucketName}</a> <span class="divider">/</span></li>                    
                                <c:if test="${bucketContent.prefix != null}">
                                    <c:set var="path" value="${bucketContent.prefix}"/>
                                    <c:set var="prefix" value=""/>
                                    <c:forEach var="folder" items="${fn:split(path, '/')}">
                                        <c:if test="${prefix != ''}">
                                            <c:set var="prefix" value="${prefix}${folder}/"/>
                                        </c:if>                            
                                        <c:if test="${prefix == ''}">
                                            <c:set var="prefix" value="${folder}/"/>
                                        </c:if>
                                    <li><a href="/s3/getBucket.do?bucket=${bucketContent.bucketName}&prefix=${prefix}">${folder}</a> <span class="divider">/</span></li>
                                    </c:forEach>
                                </c:if>    
                        </ul>
                    </div>
                    <div class="row-fluid">
                        <span class="btn btn-default" id="btn-add-file">
                            Add File
                        </span>
                        <span class="btn btn-default disabled" id="btn-convert-folder" data-bucketname="${bucketContent.bucketName}" data-prefix="/${bucketContent.prefix}" title="Convert all the .sav files in this folder to .csv">
                            SPSS Conversion
                        </span>
                        <form id="uploadForm" action="/s3/upload.do" enctype='multipart/form-data' method="post" class="hide" style="margin-top:10px;">
                            <div class="alert alert-info">
                                <div class="row-fluid">
                                    <div class="span3">
                                       <strong>Bucket Name:</strong> 
                                    </div>
                                    <div class="span9">
                                       ${bucketContent.bucketName}
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span3">
                                        <label for="path"><strong>Path:</strong></label>
                                    </div>
                                    <div class="span9">
                                        <input id="path" type="text" name="path" value="${bucketContent.prefix}"/>
                                        <span id="path-validation"></span>
                                    </div>
                                </div>
                                
                                <div class="row-fluid">
                                    <div class="span3">
                                        <label for="browseFile"><strong>File:</strong>
                                    </div>
                                    <div class="span9">
                                        <input id="bucketPath" type="hidden" name="bucket_path" value="${bucketContent.bucketName}/"/>
                                        <input id="file" type="file" name="file" value='file' style="display:none">
                                        <div class="input-append">
                                            <input id="browseFile" class="input-medium" type="text" readonly="readonly">
                                            <a class="btn" onclick="$('input[id=file]').click();">Browse</a>
                                            <input id="btn-submit-upload" class="btn disabled" type="submit" value="Upload"/>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </c:if>
                <div class="row-fluid" style="margin-top:10px;">
                    <display:table name="bucketContent.commonPrefixes" id="row" class="table table-bordered table-hover">
                        <display:column>
                            <a href="/s3/getBucket.do?bucket=${bucketContent.bucketName}&prefix=${row}">
                                <c:set var="folder" value="${row}"/>
                                <c:set var="prefix" value="${bucketContent.prefix}"/>
                                ${fn:replace(folder,prefix,'')}
                            </a>
                        </display:column>                
                        <display:setProperty name="basic.show.header" value="false"/>
                        <display:setProperty name="basic.msg.empty_list" value="" />
                    </display:table>
                    <display:table name="bucketContent.objectSummaries" id="row" class="table table-bordered table-hover">
                        <display:column>
                            <div class="object" id="${row.key}">
                                <a href="/s3/downloadObject.do?bucketName=${bucketContent.bucketName}&objectName=${row.key}">
                                    <c:set var="file" value="${row.key}"/>
                                    <c:set var="prefix" value="${bucketContent.prefix}"/>
                                    ${fn:replace(file,prefix,'')}
                                </a>
                                <i class="icon-remove cursor-style btn_remove_object pull-right" data-id="${row.key}" data-bucket="${bucketContent.bucketName}"></i>
                            </div>

                        </display:column>
                        <display:column class="span2">
                            ${row.size} B
                        </display:column>
                        <display:column class="span1">
                            <c:set var="key" value="${row.key}"/>
                            <c:if test="${fn:contains(key,'.sav')}">
                                <script>
                                    $("#btn-convert-folder").removeClass("disabled");
                                </script>
                                <i class="icon-flag cursor-style btn_convert_single_file" title="Convert .sav file to .csv" data-prefix="/${row.key}" data-bucketname="${bucketContent.bucketName}"></i>
                            </c:if>
                        </display:column>
                        <display:setProperty name="basic.show.header" value="false"/>
                        <display:setProperty name="basic.msg.empty_list" value="" />
                    </display:table>
                </div>
            </div>
        </div>        
        <div id="add-bucket-modal" class="hide">
            <form name="newBucketForm" id="newBucketForm" action="/s3/createBucket.do" method="POST">
                <div class="row-fluid">
                    <label for="add-bucket-name" class="span3 text-right">Bucket Name</label>
                    <div>
                        <input class="span9" type="text" id="add-bucket-name" name="add-bucket-name" required/>
                    </div>
                </div>
            </form>            
        </div>
        <div id="delete-bucket-modal" class="hide"> 
            <form name="removeBucketForm" id="removeBucketForm" action="/s3/deleteBucket.do" method="POST">
                <div class="msg">
                </div>
                <input type="hidden" id="delete-bucket-name" name="delete-bucket-name"/>    
            </form>
        </div>
        <div id="delete-object-modal" class="hide"> 
            <form name="removeObjectForm" id="removeObjectForm" action="/s3/deleteObject.do" method="POST">
                <div class="msg">
                </div>
                <input type="hidden" id="delete-object-name" name="delete-object-name"/>
                <input type="hidden" id="bucket-name" name="bucket-name"/>
            </form>
        </div>
        <div id="convert-files-modal" class="hide">
            <div class="msg">
            </div>
        </div>
        <div id="convert-files-confirmation-modal" class="hide">
            <div class="msg">
            </div>
        </div>
    </body>
</html>
